import { getScale } from '@/utils/rem';

export default {
  props: {
    grid: {
      type: Object,
      default: () => ({}),
    },
    title: { // 右上角主标题
      type: String,
      default: () => '',
    },
    data: { // 数据（接口直接取出的数据）
      type: Array,
      default: () => [],
      required: true,
    },
    categoryAxisKey: { // 类目轴key值
      type: String,
      default: () => 'name',
    },
    valueKeys: { // y轴数据key值
      type: Array,
      default: () => [],
      required: true,
    },
    seriesOption: { // 不同系列的配置项，封装时会拼到series内
      type: Object,
      default: () => ({}),
    },
    showLegend: { // 是否展示图例
      type: Boolean,
      default: () => true,
    },
    legendClick: { // 是否展示图例
      type: Function,
      default: () => 'default',
    },
    legendOption: { // 图例
      type: Object,
      default: () => ({}),
    },
    colors: { // 颜色集
      type: Array,
      default: () => window.global.ECHART_COLORS,
    },
    unit: { // 单位
      type: String,
      default: () => '亿元',
    },
    showValueAxis: { // 是否显示数值轴
      type: Boolean,
      default: () => true,
    },
    showCategoryAxisLine: { // 是否显示类目轴
      type: Boolean,
      default: () => true,
    },
    axisAdaptive: { // 坐标轴是否从0开始或者使用adaptive的方法取最大最小值划分为5份
      type: Boolean,
      default: () => false,
    },
    showSplitLine: { // 是否显示SplitLine
      type: Boolean,
      default: () => true,
    },
    categoryAxisLabel: {
      type: Object,
      default: () => ({}),
    },
    showLabel: { // 是否显示柱状图上的label
      type: Boolean,
      default: () => true,
    },
    label: { // label的formatter方法
      type: Function,
      default: (params) => `${params.value}${params.data.unit}`,
    },
    colorful: { // true：同一个系列不同数据项采用对应colors的颜色，false：不同系列使用colors内的不同颜色
      type: Boolean,
      default: () => false,
    },
    themeColor: { // 主题颜色，包括图例、坐标轴等颜色
      type: String,
      default: () => 'default',
    },
    showBackground: { // 是否显示bar的background
      type: Boolean,
      default: () => false,
    },
    rem: { // 是否使用rem适配
      type: Boolean,
      default: () => true,
    },
    tooltip: {
      type: Object,
      default: () => {},
    },
    maxValue: { // 最大值
      type: Number,
      default: () => null,
    },
  },
  data() {
    return {
      scale: this.rem ? getScale() : 1,
    };
  },
  watch: {
    data: {
      handler: function (newVal, oldVal) {
        this.updateChart();
      },
      immediate: false,
      deep: true,
    },
  },
  mounted() {
    this.initChart();
    this.updateChart();
  },
};
